<template>
    <div class="setting-content">
        <first-template :padding="false">
            <div class="tab-list" slot="title">
                <span class="tab-item" :class="current == i ? 'current' : ''" v-for="(item, i) in tabList" :key="i" @click="changeTabs(i)">{{item}}</span>
                <span class="current-line" :class="`line-${current}`"></span>
            </div>
            <div slot="content">
                <router-view></router-view>
            </div>
        </first-template>
    </div>
</template>
<script>
export default {
    name: 'settingContent',
    data () {
        return {
            current: 0,
            tabList: [
                '修改密码',
                '更换手机号'
            ]
        }
    },
    methods: {
        changeTabs (i) {
            this.current = i
            let url = i == 0 ? '/home/setting' : '/home/setting/change-phone'
            this.$router.push(url)
        }
    }
}
</script>
<style lang="less" scoped>
.setting-content {
    height: 100%;
    .tab-list {
        width: 100%;
        height: 100%;
        line-height: 60px;
        position: relative;
        span {
            display: inline-block;
            width: 100px;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            &.current {
                color: #1298FC;
            }
            &.current-line {
                position: absolute;
                bottom: 0;
                width: 100px;
                height: 3px;
                background: #1298FC;
                border-radius: 2px;
                left: 0;
                transition: left .3s;
                &.line-0 {
                    left: 0;
                }
                &.line-1 {
                    left: 100px;
                }
            }
        }
    }
}
</style>